import React, { Component } from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'
import MyIcon from '../../../../utils/MyIcon'
import routeNames from '../../../../utils/routeNames'

const style = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#8b8b8b'
  },
  active: {
    fontSize: 18,
    color: '#343434',
    fontWeight: 'bold'
  },
  button: {
    paddingHorizontal: 12,
    paddingTop: 18,
    paddingBottom: 6
  }
})

export default class TabBar extends Component {
  navigateTo(index) {
    const { navigate } = this.props.navigation
    switch (index) {
      case 0:
        navigate(routeNames.mine)
        break;
      case 1:
        navigate(routeNames.found)
        break;
      case 2:
        navigate(routeNames.social)
        break;
      case 3:
        navigate(routeNames.video)
        break;
      default:
        break;
    }
  }
  render() {
    let { onOpenDrawer, navigationState } = this.props;
    return (
      <View style={{height: 50, flexDirection: 'row', alignItems: 'center', backgroundColor: '#ffffff'}}>
        <View style={{...style.button, opacity: 0}} >
          <MyIcon name="menu" size={22} color="#343434" />
        </View>
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-end', flexDirection: 'row'}}>
          <TouchableNativeFeedback onPress={() => {this.navigateTo(0)}}>
            <View style={style.button}>
              <Text style={navigationState.index == 0 ? style.active : style.text}>我的</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableNativeFeedback onPress={() => {this.navigateTo(1)}}>
            <View style={style.button}>
              <Text style={navigationState.index == 1 ? style.active : style.text}>发现</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableNativeFeedback onPress={() => {this.navigateTo(2)}}>
            <View style={style.button}>
              <Text style={navigationState.index == 2 ? style.active : style.text}>云村</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableNativeFeedback onPress={() => {this.navigateTo(3)}}>
            <View style={style.button}>
              <Text style={navigationState.index == 3 ? style.active : style.text}>视频</Text>
            </View>
          </TouchableNativeFeedback>
        </View>
        <TouchableNativeFeedback>
          <View style={style.button}>
            <MyIcon name="search" size={22} color="#343434" />
          </View>
        </TouchableNativeFeedback>
      </View>
    )
  }
}